<template>
	 <span class="icon iconfont" :class="'icon-'+name" :style="{ color: color || '#999', fontSize: size + unit, fontWeight: bold ? 'bold' : 'normal',margin:margin }"
		@tap="handleClick"></span>
</template>
<script>
	export default {
		name: 'CIcon',
		emits: ['click'],
		props: {
			name: {
				type: String,
				default: ''
			},
			size: {
				type: [Number, String],
				default: 32
			},
			//px或者rpx
			unit: {
				type: String,
				default: 'px'
			},
			color: {
				type: String,
				default: '#999'
			},
			bold: {
				type: Boolean,
				default: false
			},
			margin: {
				type: String,
				default: "0"
			},
			index: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {}
		},
		methods: {
			handleClick() {
				this.$emit('click', {
					index: this.index
				});
			}
		}
	};
</script>

<style>
@font-face {
  font-family: "iconfont"; /* Project id 2910572 */
  src: url('iconfont.eot?t=1635865977550'); /* IE9 */
  src: url('iconfont.eot?t=1635865977550#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAARYAAsAAAAACKgAAAQLAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDBgqEcIQJATYCJAMMCwgABCAFhGcHSBt3B8iOkVuMOJZf+F/x8O8Y+/u24Z7UO43TRRORRKdSVVOkdElQ4UsoYvP/nv7NoLQjMxJZm9ZJT3YfnGzu4EexeOS3+D+Hi1vPA5vfAoBJaw4OA8sDCqM1JgbetgPyG8YuL3IVgVpzUugs5RRVAdM9HJLAkR49NYiiY08sxIERJ1IqsKGaW9m0ZTlHxoA+6VDnJuDce3x8FxFGJBWZ3s/ybjYfnH3v8d5Ll/nPAPmNkyLA0gkVyJhamCR2qlXbdAPXFF21RSw9FFypCGlQ6///eHSFU7nkf7xEVNJZ9RAzxkwHxbDIBB9eNMh2/L9SiSo8A+DHALelyGMBMQi330WKDgbuCF3h5MTaLvfZHLPZa8pro/VGE6XP4uu2m30u+y0FDo8Ou/y34Rxl3NGkk2E7jThspfNKe3tGnSNAzVrm0CKOy11Xu64P2Y82STmdcLxucBuz1cTEwdSUcvFiBKk92s7uQFEvx+biFVs22VSjtUuIZZl1Fdowx8Y+q9EoVSpGrfen1RKsbc1ipfUUY1PNUW5ltqHc9ch/Gh1cYle7xOpvCdumPL6b3XMCRe9WI8jrq4lqXWXeFbC4Q9hQky0Lvztuy6r8dHuZSwrfMZG5u+3baPJGOyvr2osB6oGumOavwcuef8rM2uYaoRf1cTrf+tJwfeiHE6vwklhvryzVV69LXl9V/s68Y0vwVSc+hNYPX7LOn/5ofYBr4WjBZSqNFn6w0I4YVbIcd0d3DutHRvdw8ODU1q1qFDb1SCSn9KWnGnoaRQ11qysa1/ZbBMDP4fQ0kkrvItPTyS5McWt1IlRaGrX4td7MPXv6XY/CngYhXGSa6Zpp2gVhv5vyBGr4Mpw/u0WMRaDpZ6nLnzMJZ367aB9fsjXLTNyb1ioGrWNNfqOjvvZ4bZK2GGuvdVqQBuA/U6x0e3+Bv/EvddbzVrOkr0ZoAe9b9H961GaIKQ1QfW9UwQvPrqnCDgDKDWckF8HdBUC5beqWHYKeHQm1ho7/SNfqeXdOmxJJqNYWQVKlD7JqA4iCmYAKdRagUrVFqDUpu32dNgq6otRgRBeA0GwbJI2eIGt2BVEwWqjQ6QNUavYXam0Gt7c6I8HLpAkcEnysfQ4m5lGkwORCL9MKQjhDhtN59hqC7hBDKxYeEpb25hIkQfdRp2OmMAJCASagKTmWQ8cjZDIKU9CUhODBEBGEioTQUEHRUUJ4lBxkohFwEIEP024OjBgPhSRwksPk61UgCM0gg6MbImoUtA5MQ5ljwoUIa4DIZZGNEi4kf4eZhCJAkACXE6BR5DA5ioIgM1wUjKK4mASBBwoh6uBQSBCKkgmaskKm58hvbhrU0hvkSJGjaNmn+ESwjZOIcVLoJE3gDHHkpAkSAAA=') format('woff2'),
       url('iconfont.woff?t=1635865977550') format('woff'),
       url('iconfont.ttf?t=1635865977550') format('truetype'),
       url('iconfont.svg?t=1635865977550#iconfont') format('svg');
}
.iconfont { 
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-wode-wodejiangjin:before {
  content: "\e622";
}

.icon-tuijianren:before {
  content: "\e624";
}
</style>
